﻿
@{
    ViewBag.Title = "Table";
}

<h2>Table - Cached Table Storage</h2>
<p>Cached table storage provides cached access to underlying table data. In this example, a cache cluster is put in front of a table storage with <b>1,000,000</b> records. The records are paged into cache as end users request for different pages so that repetitive requests can be served directly from cache. Note this scenario uses a hosted cache. If In-Role cache is used, the performance is expected to be further improved.</p>
<h3>Customers</h3>

<div id="customers">
    <b>Company:</b>
    <select data-bind="options:companies, value: company">
    </select>
    <table style="background-color:#e6e6e6;" class="customertable">
        <thead style="font-weight: bold; font-size: 18px; font-family: Calibri; background-color: #1d1f3d; color: white">
            <tr>
                <td>Id</td>
                <td>Name</td>
                <td>Comment</td>
                <td>Value</td>
                <td>Contract Date</td>
            </tr>
        </thead>
        <tbody data-bind="foreach:customers">
            <tr style="font-weight:normal; font-size:16px;font-family:Calibri">
                <td data-bind="text: id"></td>
                <td data-bind="html: name"></td>
                <td data-bind="html: comment" style="width:300px"></td>
                <td data-bind="text: value" style="text-align:right"></td>
                <td data-bind="html: contractDate"></td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="background-color:#1d1f3d; color:white">
                <td colspan="5" style="align-content:center">
                    <table>
                        <tr>
                            <td><button data-bind="click:previousPage">Previous Page</button></td>
                            <td><input data-bind="value:currentPage" /></td>
                            <td><button data-bind="click:nextPage">Next Page</button></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tfoot>
    </table>
</div>
@section scripts{
    <script src="~/Scripts/knockout-3.0.0.js"></script>
    <script>
        function customerVM(id, name, company, value, comment, contractDate) {
            var self = this;
            self.id = id;
            self.name = name;
            self.company = company;
            self.value = value;
            self.comment = comment;
            self.contractDate = contractDate;
        };
        function customersVM() {
            var self = this;
            self.customers = ko.observableArray([]);
            self.company = ko.observable('Company0');
            self.currentPage = ko.observable(1);
            self.pageSize = 40;
            self.companies = ko.observableArray(['Company0', 'Company1']);
            self.refresh = function () {
                $.getJSON("/api/TableData/GetTable?partition=" + self.company()
                    + "&startId=" + padZeros((self.currentPage() - 1) * self.pageSize, 7)
                    + "&endId=" + padZeros(self.currentPage() * self.pageSize - 1, 7), function (json) {
                        self.customers.removeAll();
                        $.each(json, function (key, val) {
                            self.customers.push(new customerVM(val.Id, val.Name, val.Company, val.Value, val.Comment, val.ContractDate));
                        });
                    });
            };
            self.previousPage = function () {
                if (self.currentPage() > 1) {
                    self.currentPage(self.currentPage() - 1);
                }
            };
            self.nextPage = function () {
                if (self.currentPage() < 1000000 / self.pageSize) {
                    self.currentPage(parseInt(self.currentPage()) + 1);
                }
            };
            self.currentPage.subscribe(function () {
                self.refresh();
            });
            self.company.subscribe(function () {
                self.refresh();
            });
        };
        function padZeros(num, size) {
            var s = "000000000" + num;
            return s.substr(s.length - size);
        };
        var vm = new customersVM();
        $(function () {
            ko.applyBindings(vm, customers);
            vm.refresh();
        });
    </script>
}
